<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="/index.js"></script>
    <link href="/index.css" rel="stylesheet">
    <title>mmt</title>
    <style>

    </style>
</head>

<body style="background-color: rgb(255, 233, 237);">
    <div class="wrapper">
        <div class="top">
            <div class="top_logo">
                <img src="./source/mmt.png">
                <p> MomoTalk</p>
            </div>
        </div>

        <div class="sidenav">
            <div class="search"> <!---搜索-->
                <input id="search_01" placeholder="搜索">
            </div>

            <ul> <!---对话状态栏-->
                <li>
                    <div class="content">
                        <img class="li_img" src="./source/youxiang.png">
                        <div class="li_center">
                            <div class="li_top">
                                <span class="li_name">早濑优香</span>
                                <span class="li_time">11:45</span>
                            </div>
                            <div class="li_last">老师您好。。。</div>
                        </div>
                    </div>
                </li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


        <div class="title"> <!--头部框,类似qq的集成功能等，虽然不可能做出来-->
            <div class="person_info">
                <img class="li_img" src="./source/youxiang.png">
                <p class="li_name">早濑优香</p>
            </div>
        </div>

        <div class="chat"> <!---聊天区-->
            <ul>
                <li class="left">
                    <img class="img_left" src="./source/youxiang.png">
                    <div class="content_left">
                        <div class="name_time_left">
                            <p>早濑优香</p>
                            <p>11:45</p>
                        </div>
                        <p class="info_left">
                            你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                        </p>
                    </div>
                <li>
                
                <li class="left">
                    <img class="img_left" src="./source/youxiang.png">
                    <div class="content_left">
                        <div class="name_time_left">
                            <p>早濑优香</p>
                            <p>11:45</p>
                        </div>
                        <p class="info_left">
                            你好
                        </p>
                    </div>
                <li>

                <li class="right">
                    <img class="img_right" src="./source/sensei.jpg">
                    <div class="content_right">
                        <div class="name_time_right">
                            <p>sensei</p>
                            <p>11:45</p>
                        </div>
                        <p class="info_right">
                            你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
                        </p>
                    </div>
                <li>
            <ul>
        </div>

        <div class="bottom"> <!--下方输入框-->
            <div class="top_fuc"> <!--功能按钮-->

            </div>
            <div class="in_out"> <!--输入框，发送-->
                <input class="input_01" placeholder="输入消息...">
                <button class="output_01">发送</button>
            </div>
        </div>
    </div>
</body>

</html>